import React from 'react'
import PropTypes from 'prop-types'
import { Cascader, Form, Input, Modal, Switch } from 'antd'

const FormItem = Form.Item

const formItemLayout = {
  labelCol: {
    span: 6,
  },
  wrapperCol: {
    span: 14,
  },
}

const TaskNodeModal = ({
  dispatch,
  approveTypeCheckedValue,
  jobTreeData,
  accountTreeData,
  item = {},
  taskNode,
  booleanApproveType,
  onOk,
  form: {
    getFieldDecorator,
    validateFields,
    setFieldsValue,
    getFieldsValue,
  },
  ...modalProps
}) => {
  const handleOk = () => {
    validateFields((errors) => {
      if (errors) {
        return
      }
      const data = {
        ...getFieldsValue(),
        key: item.key,
      }
      console.log(data)
      onOk(data)
    })
  }
  const modalOpts = {
    ...modalProps,
    onOk: handleOk,
  }
  const approveTypeCheckedFunc = (isChecked) => {
    setFieldsValue({
      jobIds: undefined,
      accountIds: undefined,
    })
    dispatch({
      type: 'deploy/approveTypeChangeChecked',
      payload: isChecked,
    })
  }
  const onChangeJob = (value) => {
    // console.log(value)
  }
  const onChangeAccount = (value) => {
    // console.log(value)
  }
  const renderJobType = taskNode.approveType === 1
  const renderAccountType = taskNode.approveType === 0
  return (
    <Modal {...modalOpts}>
      <Form layout="horizontal">
        <FormItem label="表单地址" hasFeedback {...formItemLayout}>
          {getFieldDecorator('formUrl', {
            initialValue: taskNode.formUrl,
            rules: [
              {
                required: true,
                message: '表单地址不能为空!',
              },
            ],
          })(<Input />)}
        </FormItem>
        <FormItem label="代办类型" hasFeedback {...formItemLayout}>
          {getFieldDecorator('approveType', {})(<Switch checked={taskNode.approveType === 0}
            onChange={approveTypeCheckedFunc}
            checkedChildren="人员"
            unCheckedChildren="岗位"
          />)}
        </FormItem>
        <FormItem label="岗位" hasFeedback {...formItemLayout}>
          {getFieldDecorator('jobIds', {
            initialValue: taskNode.approveType === 0 ? undefined : [taskNode.parentId, taskNode.approveId],
            rules: [
              {
                required: renderJobType,
                message: '岗位不能为空!',
              },
            ],
          })(<Cascader onChange={onChangeJob}
            expandTrigger="hover"
            disabled={taskNode.approveType === 0}
            options={jobTreeData}
          />,
          )}
        </FormItem>
        <FormItem label="人员" hasFeedback {...formItemLayout}>
          {getFieldDecorator('accountIds', {
            initialValue: taskNode.approveType === 1 ||taskNode.isInit ? undefined : [taskNode.parentId, taskNode.approveId],
            rules: [
              {
                required: renderAccountType,
                message: '人员不能为空!',
              },
            ],
          })(<Cascader onChange={onChangeAccount}
            expandTrigger="hover"
            disabled={taskNode.approveType === 1}
            options={accountTreeData}
          />,
          )}
        </FormItem>
      </Form>
    </Modal>
  )
}
TaskNodeModal.propTypes = {
  dispatch: PropTypes.func,
  approveTypeCheckedValue: PropTypes.bool,
  form: PropTypes.object.isRequired,
  type: PropTypes.string,
  item: PropTypes.object,
  taskNode: PropTypes.object,
  booleanApproveType: PropTypes.bool,
  onOk: PropTypes.func,
  jobTreeData: PropTypes.array,
  accountTreeData: PropTypes.array,
}

export default Form.create()(TaskNodeModal)
